import React from 'react'
import LwjTable from 'components/LwjTable/LwjTable'
import moment from 'moment'
import { Modal, Table, Button } from 'antd'
import BindRoles from './BindRoles'
import BindOrganizations from './BindOrganizations'

const List = ({
                onEnable,
                onDisable,
                showRole,
                showOrganization,
                roleProps,
                organizationProps,
                ...tableProps
              }) => {

  const guid = () => {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
      var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8)
      return v.toString(16)
    })
  }

  const columns = [
    {
      title: '姓名',
      dataIndex: 'displayName',
      key: 'displayName',
      width: '10%'
    }, {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
      width: '20%'
    }, {
      title: '手机号',
      dataIndex: 'mobile',
      key: 'mobile',
      width: '20%'
    }, {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      width: '10%',
      render: (text, record, index) => (moment(record.createTime).format('YYYY-MM-DD'))
    }, {
      title: '状态',
      dataIndex: 'enabled',
      key: 'enabled',
      width: '10%',
      render: (text, record, index) => (record.enabled === false ? '启用' : '禁用')
    }, {
      title: '操作',
      key: 'handle',
      width: '15%',
      render: (text, record) => (
        <span>
          <a onClick={() => showRole(record)}>绑定角色</a>
          <span> | </span>
          <a onClick={() => showOrganization(record)}>绑定组织机构</a>
          <span> | </span>
          {record.enabled ?
            <a onClick={() => onEnable(record)}>启用</a>
            :
            <a onClick={() => onDisable(record)}>禁用</a>
          }
        </span>
      )
    }
  ]

  return (
    <div>
      <LwjTable
        {...tableProps}
        columns={columns}/>
      <BindRoles {...roleProps}/>
      <BindOrganizations {...organizationProps}/>
    </div>
  )
}

export default List
